<template>
  <div class="my-outpatientPayment-container">
    <van-nav-bar
      class="app-nav-bar"
      title="门诊缴费"
      left-arrow
      @click-left="$router.push('/')"
    />

    <div class="condition-wrapper">
      <van-dropdown-menu>
        <van-dropdown-item @change="patientChange" v-model="cardNo" :options="patientList" />
      </van-dropdown-menu>
    </div>

    <van-tabs v-model="active" class="van-tabs-wrapper" @change="onClick">
      <van-tab title="待支付" class="van-tab-wrapper">
        <van-cell-group inset class="outpatientPayment-wrapper"  v-for="item in prescriptionList" @click="toOutpatientPaymentDetail(item.id)">
          <van-cell class="van-cell-prescription">
            <div class="orderInfoId-wrapper">
              挂号序号：{{ item.orderInfoId }}
            </div>
            <div class="prescription-wrapper">
              <van-row>
                <van-col span="17">{{item.params.depname}}（门诊）</van-col>
                <van-col span="7" class="prescription-price-wrapper">{{item.totalPrice}} 元</van-col>
              </van-row>
            </div>
            <div class="prescription-time-and-status">
              <van-row>
                <van-col span="17">{{item.createTime}}</van-col>
                <van-col span="7" class="prescription-status-wrapper">待支付</van-col>
              </van-row>
            </div>
          </van-cell>
        </van-cell-group>
      </van-tab>

      <van-tab title="历史记录" class="van-tab-wrapper">
        <van-cell-group inset class="outpatientPayment-wrapper" v-for="item in prescriptionList" @click="toOutpatientPaymentDetail(item.id)">
          <van-cell class="van-cell-prescription">
            <div class="orderInfoId-wrapper">
              挂号序号：{{ item.orderInfoId }}
            </div>
            <div class="prescription-wrapper">
              <van-row>
                <van-col span="17">{{item.params.depname}}（门诊）</van-col>
                <van-col span="7" class="prescription-price-wrapper">{{item.totalPrice}} 元</van-col>
              </van-row>
            </div>
            <div class="prescription-time-and-status">
              <van-row>
                <van-col span="17">{{item.createTime}}</van-col>
                <van-col span="7" class="prescription-status-wrapper">{{item.status}}</van-col>
              </van-row>
            </div>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import patientApi from "@/api/patient";
import {mapState} from "vuex";
import prescriptionApi from "@/api/prescription";

export default {
  name: "MyOutpatientPayment",
  data(){
    return{
      active:0,
      searchObj:{status:0},
      cardNo:null,
      prescriptionList:[],
      patientList:[],
    }
  },
  computed:{
    ...mapState(['user'])
  },
  created() {
    this.init()
  },
  methods:{
    async init(){
      await this.getPatient();
      await this.getPrescriptionList()
    },
    async getPatient(){
      const{data:res} =await patientApi.findByUserId(this.user.userId)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'查询失败'})
      }
      if (res.data.length!=0){
        res.data.forEach((item,index)=>{
          this.patientList.push({'text':item.name,'value':item.cardNo})
        })
        this.cardNo = this.patientList[0].value
        this.searchObj.cardNo = this.cardNo
      }else{
        this.cardNo = null
      }

    },
    async getPrescriptionList(){
      this.searchObj.userId = this.user.userId
      const {data:res} = await prescriptionApi.getPastPrescriptionList(this.searchObj)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'查询失败'})
      }
      this.prescriptionList = res.data
    },
    async patientChange(val){
      this.searchObj.cardNo = val
      //搜索对应的预约订单
      await this.getPrescriptionList()
    },
    toOutpatientPaymentDetail(prescriptionId){
      this.$router.push({path:'/outpatientPayment/detail',query:{prescriptionId}})
    },
    onClick(){
      this.searchObj.status = this.active
      this.getPrescriptionList()
    }
  }
}
</script>

<style lang="less" scoped>
.my-outpatientPayment-container{
  .ven-cell-group-wrapper{
    border-bottom: 2px solid black;
    .ven-cell-wrapper{
      .ven-row-wrapper{
        .patient-info-wrapper{
          .patient-name-span{
            font-size: 18px;
          }
          .patient-name-span:after{
            content: "  ";
            white-space: pre;
          }
        }
        .switch-btn-wrapper{
          text-align: right;
        }
      }
    }
  }
  .van-tabs-wrapper{
    .van-tab-wrapper{
      .outpatientPayment-wrapper{
        margin-bottom: 10px;
        .van-cell-prescription{
          .orderInfoId-wrapper{
            background-color: rgb(245,248,255);
            font-size: 15px;
            font-weight: bold;
            padding: 10px 0;
          }
          .prescription-wrapper{
            font-size: 15px;
            font-weight: bold;
            .prescription-price-wrapper{
              text-align: right;
            }
          }
          .prescription-time-and-status{
            .prescription-status-wrapper{
              text-align: right;
            }
          }
        }

      }
    }
  }
}
</style>
